<template>
    <div class="modal-overlay">
        <div ref="modal" class="modal" @mousedown="startDrag" @touchstart="startDrag" @mouseup="stopDrag"
            @touchend="stopDrag" @mousemove="onDrag" @touchmove="onDrag" @mouseleave="stopDrag"
            :style="{ top: positionY + 'px', left: positionX + 'px', width, }">
            <div class="title">
                排水管线（PS）图例
            </div>
            <div class="content">
                <div class="other-row" v-for="item, index in PS_Legend">
                    <div class="item-id">{{ 'PS' + (index + 1).toString().padStart(2, '0') }}</div>
                    <div class="item-name">{{ item.name }}</div>
                    <div class="item-png">
                        <img :src="require('@/assets/img/legend/' + item.name + '.png')" alt="图例图片"
                            style="width: 30px; height: 30px; border-radius: 5px;"
                            :style="{ width: item.name === '预留口' || item.name === '非普查' ? '90px !important' : '30px' }">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'CanDragModal',
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: '标题'
        },
        width: {
            type: String,
            default: '500px'
        },
    },
    data() {
        return {
            isDragging: false,
            lastCursorX: null,
            lastCursorY: null,
            positionX: 0,
            positionY: 0,
            PS_Legend: [{
                name: "污水井",
                url: require('@/assets/img/legend/污水井.png')
            }, {
                name: "雨水井",
                url: require('@/assets/img/legend/雨水井.png')
            }, {
                name: "雨箅",
                url: require('@/assets/img/legend/雨箅.png')
            }, {
                name: "污箅",
                url: require('@/assets/img/legend/污箅.png')
            }, {
                name: "溢流井",
                url: require('@/assets/img/legend/溢流井.png')
            }, {
                name: "闸门井",
                url: require('@/assets/img/legend/闸门井.png')
            }, {
                name: "跌水井",
                url: require('@/assets/img/legend/跌水井.png')
            }, {
                name: "通风井",
                url: require('@/assets/img/legend/通风井.png')
            }, {
                name: "冲洗井",
                url: require('@/assets/img/legend/冲洗井.png')
            }, {
                name: "沉泥井",
                url: require('@/assets/img/legend/沉泥井.png')
            }, {
                name: "渗水井",
                url: require('@/assets/img/legend/渗水井.png')
            }, {
                name: "出气井",
                url: require('@/assets/img/legend/出气井.png')
            }, {
                name: "水封井",
                url: require('@/assets/img/legend/水封井.png')
            }, {
                name: "排水泵站",
                url: require('@/assets/img/legend/排水泵站.png')
            }, {
                name: "化粪池",
                url: require('@/assets/img/legend/化粪池.png')
            }, {
                name: "净化池",
                url: require('@/assets/img/legend/净化池.png')
            }, {
                name: "进水口",
                url: require('@/assets/img/legend/进水口.png')
            }, {
                name: "出水口",
                url: require('@/assets/img/legend/出水口.png')
            }, {
                name: "阀门",
                url: require('@/assets/img/legend/阀门.png')
            }, {
                name: "变径",
                url: require('@/assets/img/legend/变径.png')
            }, {
                name: "出地",
                url: require('@/assets/img/legend/出地.png')
            }, {
                name: "拐点",
                url: require('@/assets/img/legend/拐点.png')
            }, {
                name: "三通",
                url: require('@/assets/img/legend/三通.png')
            }, {
                name: "四通",
                url: require('@/assets/img/legend/四通.png')
            }, {
                name: "多通",
                url: require('@/assets/img/legend/多通.png')
            }, {
                name: "预留口", url: require('@/assets/img/legend/预留口.png')
            }, {
                name: "非普查", url: require('@/assets/img/legend/非普查.png')
            }, {
                name: "一般管线点", url: require('@/assets/img/legend/一般管线点.png')
            }, {
                name: "井边点", url: require('@/assets/img/legend/井边点.png')
            }, {
                name: "井边点", url: require('@/assets/img/legend/井边点.png')
            },]
        };
    },
    methods: {
        close() {
            this.$emit('dragWindowEvent', 'visible', false);
        },
        startDrag(e) {
            this.isDragging = true;
            this.lastCursorX = e.clientX || e.touches[0].clientX;
            this.lastCursorY = e.clientY || e.touches[0].clientY;
        },
        stopDrag() {
            this.isDragging = false;
        },
        onDrag(e) {
            if (this.isDragging) {
                const dx = (e.clientX || e.touches[0].clientX) - this.lastCursorX;
                const dy = (e.clientY || e.touches[0].clientY) - this.lastCursorY;

                this.positionX += dx;
                this.positionY += dy;

                this.lastCursorX = e.clientX || e.touches[0].clientX;
                this.lastCursorY = e.clientY || e.touches[0].clientY;
            }
        },
        handleClick(e) { },
    }
};
</script>

<style scoped lang=scss>
.modal-overlay {
    position: fixed;
    top: 100px;
    right: 415px;
    bottom: 0;
    z-index: 4;
    cursor: pointer;
    pointer-events: none;
}

.modal {
    position: absolute;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    z-index: 4;
    pointer-events: auto;
    background-color: #ffffff;
    width: 360px !important;

    .title {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 52px;
        color: #000;
        opacity: 0.7;
        font-size: 20px;
        font-weight: bold;
        // border-bottom: 1px solid #ccc;

        .close-btn {
            position: absolute;
            right: 20px;
            font-size: 12px !important;
            margin-top: -40px;
            pointer-events: all;
            z-index: 999;
        }
    }

    .content {
        height: 520px;
        max-height: 520px;
        width: 320px !important;
        overflow: auto;
        color: rgb(76, 57, 38);

        .first-row {
            display: flex;
            align-items: center;
            width: 100%;
            height: 40px;
            font-size: 18px;
            font-weight: bold;
        }

        .other-row {
            display: flex;
            align-items: center;
            width: 100%;
            height: 50px;
            font-size: 18px;
            font-weight: bold;

            .item-id {
                width: 50px;
            }

            .item-name {
                width: 150px;
                text-align: center;
            }
        }
    }
}

/* 关键样式 */
.auto-width-tabs ::v-deep .el-tabs__nav {
    float: none;
    /* 清除浮动 */
    display: inline-flex;
    /* 使用内联弹性布局 */
}

.auto-width-tabs ::v-deep .el-tabs__item {
    width: auto !important;
    /* 宽度自适应 */
    min-width: 60px;
    /* 可选的最小宽度 */
    padding: 0 20px;
    /* 左右内边距 */
    flex: 0 1 auto;
    /* 不拉伸、不收缩 */
    text-align: center;
}

.auto-width-tabs ::v-deep .el-tabs__item {
    padding: 0 12px;
    /* 减少左右内边距 */
    font-size: 13px;
    /* 减小字体大小 */
}
</style>
